<template>
  <el-row class="storeSort">
    <el-col
      class="colMain"
      :span="24"
    >
    <span class="title">算法分类：</span>
      <el-tag
        class="tag"
        :key="alsClass.classId"
        v-for="alsClass in alsClasses"
        @click="select(alsClass.classId)"
        :type="activedIndex == alsClass.classId ? 'primary' : 'info'"
      >
        <div class="textOverflow text">{{ alsClass.className }}</div>
      </el-tag>
    </el-col>
  </el-row>
</template>

<script setup>

import { ref } from 'vue';
defineProps({
  alsClasses: Array,
});

const emit = defineEmits(['selectClass'])
const activedIndex = ref(''); // 选中的算法类

function select (val) {
  if (activedIndex.value == val) { // 取消算法分类
    activedIndex.value = '';
  } else {
    activedIndex.value = val; // 选择算法分类
  }
  emit('selectClass', activedIndex.value);

}
</script>

<style lang="scss" scoped>
.storeSort {
  width: 100%;
  padding: 0 15px;
  .textOverflow {
    overflow: hidden; // 超出内容隐藏
    text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
    white-space: nowrap; // 强制文本在一行显示
  }
  .colMain {
    border: solid 1px gray;
    .title {
      padding-left: 15px;
    }
    .tag {
      height: 40px;
      padding: 0 15px;
      margin: 10px;
      cursor: pointer;
      .text {
        font-size: 16px;
        max-width: 150px;
      }
    }
  }
}
</style>